<template>
	<view class="wrap">
		<view @tap="setAuto" class="item flex-row">
			<text class="label">自动翻译(收到新消息时)</text>
			<text v-if="autoTranslate" class="iconfont icon-radio-checked"></text>
			<text v-else class="iconfont icon-radio"></text>
		</view>
		<view class="item flex-row">
			<text class="label">当前设置翻译语言</text>
			<view class="label">{{ current }}</view>
		</view>
		<view class="space"></view>
		<scroll-view class="scroll" scroll-y>
			<view @tap="onSelect(item)" v-for="item in langs" :key="item.value" class="item flex-row">
				<text class="label">{{ item.name }}</text>
				<text v-if="lang == item.value" class="iconfont icon-radio-checked"></text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			langs: [],
			lang: '',
			autoTranslate: 0
		}
	},
	computed: {
		current(){
			return this.langs.find(item=>item.value == this.lang)?.name
		}
	},
	created(){
		this.getList()
		this.getUserProfile()
	},
	methods: {
		// 设置自动
		setAuto(){
			this.autoTranslate = 1 - this.autoTranslate
			this.updateMyProfile()
		},
		// 选择语言
		onSelect(item){
			this.lang = item.value
			this.updateMyProfile()
		},
		// 更新我的资料
		updateMyProfile(){
			XBCIM.updateMyProfile({
				autoTranslate: this.autoTranslate,
				translateTo: this.lang
			}).then(()=>{
				uni.showToast({
					icon: 'none',
					title: '设置成功'
				})
			}).catch(err=>{
				console.log(`修改失败`, err)
				uni.showToast({
					icon: 'none',
					title: '设置失败'
				})
			})
		},
		// 获取语言列表
		async getList(){
			this.langs = await XBCIM.getLanguageList() || []
		},
		// 获取用户资料
		async getUserProfile(){
			const { translateTo, autoTranslate } = await XBCIM.getUserProfile()
			this.lang = translateTo || ''
			this.autoTranslate = autoTranslate || 0
		}
	}
}
</script>

<style lang="scss" scoped>
.scroll{
	/* #ifdef H5 */
	height: calc(100vh - 220rpx - 44px);
	/* #endif */
	
	/* #ifndef H5 */
	height: calc(100vh - 220rpx);
	/* #endif */
}
.space{
	height: 20rpx;
	background-color: #F5F5F5;
}
.item {
	height: 100rpx;
	padding: 0 30rpx;
	border-bottom: 2rpx solid #f5f5f5;

	.label{
		color: #333;
		font-size: 30rpx;
	}
	
	.iconfont{
		font-size: 40rpx;
		
		&.icon-radio{
			color: #999;
		}
		
		&.icon-radio-checked{
			color: #007aff;
		}
	}
}
</style>